<template>
  <view class="details-box">
    <view class="details-fm-top">
      <image :src="detailsInfo.fmPicture" mode="aspectFill"></image>
      <view class="inser-text">
        <view class="title">{{ detailsInfo.title }}</view>
        <view class="attention-btn">关注专辑 </view>
      </view>
    </view>
    <view class="authorInfo">
      <view class="base-info">
        <view class="tx">
          <image
            class="tx"
            :src="detailsInfo.txPicture"
            mode="aspectFill"
          ></image>
        </view>
        <view class="author-name">{{ detailsInfo.name }}</view>
      </view>
      <view class="des-text">
        <text>{{ detailsInfo.descript }}</text>
      </view>
    </view>
    <view class="details-list">
      <view
        class="details-item"
        v-for="(item, index) in detailsInfo.morePictur"
        :key="index"
      >
        <my-picture-item :list="detailsInfo" :index="index">
          <image :src="item" mode="aspectFill"></image>
        </my-picture-item>
      </view>
    </view>
  </view>
</template>

<script>
import picure_item from "@/components/public/picture_item/index";
const Mock = require("mockjs");
export default {
  components: {
    "my-picture-item": picure_item,
  },
  data() {
    return {
      detailsInfo: {},
      hasMore: true,
      isLoading: false, // 是否正在加载
      // startLoading: false, // 一开始加载的时候的判断标准
      // recordLoadingPosition: 0, // 记录触底数据加载时的位置
      totalNum: 50,
      limit: 6,
    };
  },
  methods: {
    async getDetailsInfo(id) {
      this.detailsInfo = Mock.mock({
        "title|1": ["【独家】急先锋", "【独家】光头强", "【独家】幸福来敲门"],
        "name|1": ["蛋蛋君", "顽皮君", "爱跳虎"],
        "fmPicture|1": [
          "/static/image/fm1.jpg",
          "/static/image/fm2.jpg",
          "/static/image/fm3.jpeg",
        ],
        "descript|1": [
          "急先锋是一种精神, 它们急流勇进，先锋夺人!\n急先锋是一份责任, 它们上天入地, 护你周全!",
          "帕拉帕巴拉扒拉扒拉阿拉历史历史累死了阿拉阿拉实例上拉拉屎啦拉屎拉屎拉屎按理说上拉按理说阿萨德阿萨德阿萨德阿萨德阿萨德按时",
        ],
        "txPicture|1": ["/static/image/tx2.jpg", "/static/image/tx3.jpeg"],
        datetime: /^(?:[01]\d|2[0-3]):[0-5]\d:[0-5]\d$/,
      });
      this.detailsInfo.id = id;
      this.detailsInfo.morePictur = [];
      this.detailsInfo.pictureList = [];
      for (var i = 0; i <= 20; i++) {
        let commentContent = this.newComment();
        this.detailsInfo.morePictur.push("/static/image/dd.jpg");
        this.detailsInfo.pictureList.push({
          pictureUrl: "/static/image/dd.jpg", // 图片路径
          // hotComment: [
          //   {
          //     userTx: "",
          //     username: "",
          //     commentContent: "",
          //     likeNum: "",
          //     tag: ["", ""], // 用户拥有的小图标
          //   },
          // ], // 热门评论
          // newComment: [{}], // 最新评论
          hotComment: commentContent.randomHotComment.hotComment,
          newComment: commentContent.randomNewComment.hotComment,
        });
      }
      // console.log(this.detailsInfo);
    },
    newComment() {
      let randomHotComment = Mock.mock({
        "hotComment|0-4": [
          {
            "userTx|1": [
              "/static/image/tx2.jpg",
              "/static/image/tx3.jpeg",
              "/static/image/tx4.jpg",
              "/static/image/tx5.jpg",
              "/static/image/tx6.jpg",
            ],
            "username|1": [
              "修仙吗十元一次",
              "我有一排“德芙”",
              "昵称全被占用了",
              "豆子vs小欢",
            ],
            "commentContent|1": [
              "简直无敌可爱",
              "黄金！！简单完毕",
              "嘎嘣脆",
              "这是小熊猫，哈哈。小碗熊是毛色灰白那种，小熊猫和小碗熊是两个物种哦",
            ],
            "likeNum|1-100": 10,
            "tag|0-4": [
              {
                "tagImg|1": [
                  "/static/image/hb1.jpg",
                  "/static/image/hb2.png",
                  "/static/image/hb3.png",
                  "/static/image/hb4.png",
                  "/static/image/hb8.jpg",
                ],
              },
            ],
          },
        ],
      });
      let randomNewComment = Mock.mock({
        "hotComment|0-4": [
          {
            "userTx|1": [
              "/static/image/tx2.jpg",
              "/static/image/tx3.jpeg",
              "/static/image/tx4.jpg",
              "/static/image/tx5.jpg",
              "/static/image/tx6.jpg",
            ],
            "username|1": [
              "修仙吗十元一次",
              "我有一排“德芙”",
              "昵称全被占用了",
              "豆子vs小欢",
            ],
            "commentContent|1": [
              "简直无敌可爱",
              "黄金！！简单完毕",
              "嘎嘣脆",
              "这是小熊猫，哈哈。小碗熊是毛色灰白那种，小熊猫和小碗熊是两个物种哦",
            ],
            "likeNum|1-100": 10,
            "tag|0-4": [
              {
                "tagImg|1": [
                  "/static/image/hb1.jpg",
                  "/static/image/hb2.png",
                  "/static/image/hb3.png",
                  "/static/image/hb4.png",
                  "/static/image/hb8.jpg",
                ],
              },
            ],
          },
        ],
      });
      return {
        randomHotComment,
        randomNewComment,
      };
    },
    async getMorePicture() {
      if (this.isLoading) return;
      this.isLoading = true;
      uni.showLoading({
        title: "正在加载更多",
        mask: true,
      });
      setTimeout(async () => {
        await uni.hideLoading();
        let curLength = this.detailsInfo.morePictur.length;
        for (
          var i = curLength;
          i < curLength + this.limit && i < this.totalNum;
          i++
        ) {
          let commentContent = this.newComment();
          const randomPicture = Mock.mock({
            "randomP|1": [
              "/static/image/1.jpg",
              "/static/image/2.jpg",
              "/static/image/3.jpeg",
              "/static/image/dd.jpg",
              "/static/image/3.jpg",
              "/static/image/tx3.jpeg",
            ],
          });
          this.detailsInfo.morePictur.push(randomPicture.randomP);
          this.detailsInfo.pictureList.push({
            pictureUrl: randomPicture.randomP, // 图片路径
            hotComment: commentContent.randomHotComment.hotComment,
            newComment: commentContent.randomNewComment.hotComment,
          });
        }
        this.isLoading = false; // 说加载完毕
        if (curLength >= this.totalNum) {
          uni.$showMsg();
          this.hasMore = false;
        }
        // 也就是有更多数据的时候才会去滚动会加载那个位置让下次加载留有滑动空间
        // if (curLength < 35) {
        //   // 让滚动条它回到之前加载的位置
        //   uni.pageScrollTo({
        //     scrollTop: this.recordLoadingPosition,
        //     duration: 0, // 滚动动画的时长ms
        //   });
        // }
      }, 500);
    },
  },
  onLoad(option) {
    // console.log(option);
    this.getDetailsInfo(option.id);
  },
  onReachBottom(o) {
    if (this.hasMore) {
      // this.startLoading = true; // 一加载数据的时候记录标志
      this.getMorePicture();
    } else {
      uni.$showMsg();
    }
  },
  onPageScroll(ob) {
    // if (this.startLoading) {
    //   this.recordLoadingPosition = ob.scrollTop;
    //   this.startLoading = false; // 记录到就关闭调这个标志, 在未加载的时候不会去记录它
    //   console.log("记录到了", this.recordLoadingPosition);
    // }
    // console.log(ob.scrollTop);
  },
};
</script>

<style lang="scss" scoped>
.details-fm-top {
  position: relative;
  height: 400rpx;
  image {
    height: 100%;
  }

  .inser-text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-content: center;
    padding: 0 20rpx 20rpx 30rpx;
    .title {
      font-size: 40rpx;
      color: #fff;
    }

    .attention-btn {
      padding: 15rpx 20rpx;
      background-color: $themeColor;
      color: #fff;
      font-size: 30rpx;
      border-radius: 10rpx;
    }
  }
}
.authorInfo {
  padding: 15rpx;
  .base-info {
    display: flex;
    align-items: center;
    .tx {
      width: 70rpx;
      height: 70rpx;
      border-radius: 50%;
      overflow: hidden;
    }
    image {
      width: 100%;
    }

    .author-name {
      margin-left: 10rpx;
      font-size: 30rpx;
    }
  }

  .des-text {
    margin-top: 15rpx;
    text {
      font-size: 30rpx;
      line-height: 40rpx;
      color: rgb(70, 70, 70);
    }
  }
}

.details-list {
  display: flex;
  flex-wrap: wrap;
  .details-item {
    width: 33.33%;
    height: 300rpx;
    border-right: 5rpx solid #fff;
    margin-bottom: 5rpx;

    image {
      height: 300rpx;
    }

    &:nth-child(3n) {
      border-right: 0;
    }
  }
}
</style>
